<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="demo"></canvas>
	</body>

	<script>
		const canvas = document.querySelector('canvas');

		const context = canvas.getContext('2d');

		// 指定屏幕高度为画板高度
		const width = canvas.width = window.innerWidth;
		const height = canvas.height = window.innerHeight;

		// 获取指定范围内的随机数	
		function random(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
		// 产生随机rgb
		function randomRgb() {
			return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
		}

		// 位置，速度，颜色、大小
		function Ball(x, y, spendX, spendY, color, size) {
			this.x = x;
			this.y = y;
			this.spendX = spendX;
			this.spendY = spendY;
			this.color = color;
			this.size = size;
		}

		Ball.prototype.draw = function() {
			context.beginPath();
			context.fillStyle = this.color;
			context.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
			context.fill();
		}
		// 让这个小球动起来
		Ball.prototype.run = function() {
			if ((this.x + this.size) >= width) {
				this.spendX = -(this.spendX);
			}
			if ((this.x - this.size) <= 0) {
				this.spendX = -(this.spendX);
			}

			if ((this.y + this.size) >= height) {
				this.spendY = -(this.spendY);
			}
			if ((this.y - this.size) <= 0) {
				this.spendY = -(this.spendY)
			}
			this.x += this.spendX;
			this.y += this.spendY;
		}


		let bill = new Ball(50, 50, 4, 4, 'blue', 10);
		bill.draw();
	</script>

</html>
